<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
    <link rel="stylesheet" href="../css/yhxx.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src='../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js'></script>
    <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
    <script src='../javascript/nav.js'></script>
    <link rel="stylesheet" href="../css/font_sbdceyn3aud/iconfont.css">
    <script src="../javascript/yhxx.js"></script>
    <script src="../javascript/yhxxcaozuo.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* color: #666666; */
        }
        
        body {
            background-color: rgba(232, 240, 253, 1);
        }
        
        #hmdyh_header {
            background-color: white;
            padding: 1% 3%;
            margin: 1% 0;
        }
        
        #hmdyh_table {
            width: 100%;
        }
        
        #hmdyh_table th {
            background-color: rgb(250, 250, 250);
            /* padding-left: 50px; */
        }
        
        #hmdyh_table td {
            background-color: white;
        }
        
        #hmdyh_table th,
        td {
            text-align: center;
            padding: 7px 5px;
            outline: 1px solid rgb(238, 238, 238);
        }
        
        #hmdyh_table span:not(:nth-of-type(2)) {
            color: rgb(64, 158, 255);
            margin: 0 1px;
            cursor: pointer;
        }
        
        .page_style {
            text-align: center;
            border: 1px solid rgb(238, 238, 238);
            float: left;
            padding: 10px 15px;
            margin: 10px 10px 0 0;
            cursor: pointer;
        }
        
        .page_style:hover {
            border: 1px solid rgb(64, 158, 255);
            color: rgb(64, 158, 255);
        }
        
        #page_div {
            background-color: white;
        }
        
        #hmdyh_page {
            float: right;
            padding: 20px;
        }
        
        .form-inline .form-control {
            width: 80%;
            float: right;
        }
        
        label {
            width: 20%;
        }
        
        #pageNum {
            float: right;
        }
        
        #dropdownMenu {
            margin-top: 10px;
            padding: 10px 15px;
            border: 1px solid rgb(238, 238, 238);
        }
        
        #pageNum ul {
            min-width: 100%;
        }
        
        #pageNum:hover #dropdownMenu {
            border: 1px solid rgb(64, 158, 255);
            color: rgb(64, 158, 255);
            background-color: white;
        }
        
        #del_h {
            text-align: center;
        }
        
        #del_h span {
            color: rgb(250, 207, 72);
            margin: 50px 10px;
        }
        
        .check {
            background: yellow;
        }
        
        .T_page {
            background-color: rgb(64, 158, 255);
            color: white;
        }
    </style>
</head>

<body>
    <div id="naviga">
        <div id='logo'>
            <img src="../image/logo.png" alt="">
        </div>
        <ul id="tushu" class="menu">
            <li>图书管理<span class="iconfont icon-xiala"></span></li>
            <li page-data='page1'>还书管理</li>
            <li page-data='page2'>借阅管理</li>
            <li page-data='page3'>新书入库</li>
            <li page-data='page4'>超期还书</li>
            <li page-data='page5'>销书管理</li>
            <li page-data='page6'>图书状态</li>
        </ul>
        <ul id="user" class="menu">
            <li>用户管理<span class="iconfont icon-xiala"></span></li>
            <li page-data='page7'>用户信息</li>
            <li page-data='page8'>黑名单用户</li>
            <li page-data='page9'>借阅记录</li>
            <li page-data='page10'>催还提醒</li>
        </ul>
    </div>
    <div id='top'>
        <div id='shot'>
            <img src="../image/touxiang2.png" alt="">
            <span id="name">
        叶小刀
      </span>
            <span class="iconfont icon-xiala"></span>
        </div>
    </div>
    <div id='main'>
        <div id="hmdyh_header">
            <h4>用户信息</h4>
        </div>
        <div class="clear">
            <div id='opera'>
                <button type="button" data-toggle="modal" data-target="#hmdyh_add" onclick="add_hmdyh()">新增用户</button>
                <button type="button" data-toggle="modal" data-target="#hmdyh_del" onclick="dels_hmdyh()" id="del_all">批量删除</button>
            </div>
            <div id='enquiry'>
                <input type="text" placeholder="输入关键词">
                <button>查询</button>
            </div>
        </div>
        <table id="hmdyh_table">
            <thead>
                <tr>
                    <th><input type="checkbox" name="check_all" id="" onclick="del_color_2()"></th>
                    <th>借阅卡号</th>
                    <th>借阅人</th>
                    <th>身份证号码</th>
                    <th>手机号码</th>
                    <th>性别</th>
                    <th>借阅次数</th>
                    <th>借阅册数</th>
                    <th>最新借阅日期</th>
                    <th>罚单次数</th>
                    <th>罚单金额</th>
                    <th>超期还书次数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <div id="page_div" class="clearfix">
            <div id="hmdyh_page" class="clearfix">
            </div>
        </div>
    </div>
    <div class="modal fade" id="hmdyh_add" tabindex="-1" role="dialog" aria-labelledby="hmdyh_add_Label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="hmdyh_add_Label">新增用户</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group form-inline">
                            <label>用户名:</label>
                            <input type="text" class="form-control" id="hmdyh_add_1">
                        </div>
                        <div class="form-group form-inline">
                            <label>借阅卡号:</label>
                            <input type="text" class="form-control" id="hmdyh_add_2">
                        </div>
                        <div class="form-group form-inline">
                            <label>超期天数:</label>
                            <input type="text" class="form-control" id="hmdyh_add_3">
                        </div>
                        <div class="form-group form-inline">
                            <label>罚款金额:</label>
                            <input type="text" class="form-control" id="hmdyh_add_4">
                        </div>
                        <div class="form-group form-inline">
                            <label>丢失图书:</label>
                            <input type="text" class="form-control" id="hmdyh_add_5">
                        </div>
                        <div class="form-group form-inline">
                            <label>超期还书次数:</label>
                            <input type="text" class="form-control" id="hmdyh_add_6">
                        </div>
                        <div class="form-group form-inline">
                            <label>借阅册数:</label>
                            <input type="text" class="form-control" id="hmdyh_add_7">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_add_hmdyh()">确认</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="hmdyh_change" tabindex="-1" role="dialog" aria-labelledby="hmdyh_change_Label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="hmdyh_change_Label">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group form-inline">
                            <label>用户名:</label>
                            <input type="text" class="form-control" id="hmdyh_change_1" readonly="readonly">
                        </div>
                        <div class="form-group form-inline">
                            <label>借阅卡号:</label>
                            <input type="text" class="form-control" id="hmdyh_change_2" readonly="readonly">
                        </div>
                        <div class="form-group form-inline">
                            <label>超期天数:</label>
                            <input type="text" class="form-control" id="hmdyh_change_3">
                        </div>
                        <div class="form-group form-inline">
                            <label>罚款金额:</label>
                            <input type="text" class="form-control" id="hmdyh_change_4">
                        </div>
                        <div class="form-group form-inline">
                            <label>丢失图书:</label>
                            <input type="text" class="form-control" id="hmdyh_change_5">
                        </div>
                        <div class="form-group form-inline">
                            <label>超期还书次数:</label>
                            <input type="text" class="form-control" id="hmdyh_change_6">
                        </div>
                        <div class="form-group form-inline">
                            <label>借阅册数:</label>
                            <input type="text" class="form-control" id="hmdyh_change_7">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_change_hmdyh()">确认</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="hmdyh_del" tabindex="-1" role="dialog" aria-labelledby="hmdyh_del_Label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="hmdyh_del_Label">操作确认</h4>
                </div>
                <div class="modal-body" id="del_h">
                </div>
                <div class="modal-footer" id="del_f">
                </div>
            </div>
        </div>
    </div>
    <script>
        /* nav导航jq */
        let h = $(window).height()
        $('#naviga').css({
            'height': h + 'px',
        })
        $('.menu>li:first-child').on('click', function() {
            pullDown($(this))
        })
        $('.menu>li:first-child').siblings().on('click', function() {
                jumpPage($(this))
            })
            /* 动态渲染页码添加点击事件， */
        $('#hmdyh_page').on('click', '.page_style', function(e) {
                now_page = parseInt($(this).text())
                page_turn(now_page, pageData)
            })
            /* 动态渲染每页显示条数按钮添加点击事件，并重新渲染页面 */
        $('#hmdyh_page').on('click', '.menuPage', function(e) {
                page_num = this.value
                show(1)
            })
            /* 表头多选框添加点击事件 */
        $('input[name="check_all"]').on("click", function() {
            if ($(this).is(':checked')) {
                $('input[name="box_s"]').each(function() {
                    $(this).prop("checked", true)
                }) /* 本身为点击true状态时，name=box_s的多选框，状态改为点击true */
            } else {
                $('input[name="box_s"]').each(function() {
                    $(this).prop("checked", false)
                }) /* 反之，name=box_s的多选框，状态改为未点击false */
            }
        })
        show(1)
    </script>
</body>

</html>